<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div @click="back">
                  <i class="el-icon-arrow-left"></i
                  ><span class="nickname">{{ editForm.user_nickname }}</span>
                </div>
              </div>
            </div>
            <!-- 贴文分类tablist -->
            <!-- tablist -->
            <div class="tablist_panel">
              <div class="item" v-for="(item, index) in tabList" :key="index">
                <div class="item_pan" @click="doSelect(item.id)">
                  {{ item.name }}
                  <div :class="item.selected ? 'bar selected' : 'bar'"></div>
                </div>
              </div>
            </div>
            <!-- 其他分类内容 -->
            <div class="tablist_1" v-if="tablist_1"></div>
            <div class="tablist_2" v-if="tablist_2"></div>
            <div class="tablist_3" v-if="tablist_3"></div>
            <div class="tablist_4" v-if="tablist_4"></div>
          </div>
        </div>
      </div>
      <!-- 主页右侧模板 -->
      <MainRight />
    </div>
  </main>
</template>
<script>
//MainRight
import MainRight from "@/components/MainRight.vue";

export default {
  name: "YouFoListMainContent",
  components: {
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      UserInfo: {
        user_id: this.$route.params.uid,
      },
      user_fo: "",
      user_fans: "",
      open: 1,
      user_info: "",
      user_regtime: "",
      decimals: 2, //保留小数位
      editPersonalDialogVisible: false, //编辑窗口
      editForm: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        account: JSON.parse(localStorage.getItem("user")).username
          ? JSON.parse(localStorage.getItem("user")).username
          : "账号",
        user_bgimg: JSON.parse(localStorage.getItem("user")).user_bgimg
          ? JSON.parse(localStorage.getItem("user")).user_bgimg
          : require("@/assets/img/p_bg.png"),
        user_bgimg_file: "",
        user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
          ? JSON.parse(localStorage.getItem("user")).user_headimg
          : require("@/assets/img/user.png"),
        user_headimg_file: "",
        user_nickname: "",
        user_info: "",
        bgimg_change: 0, //设定个人背景及头像是否改变，如果改变则调用上传接口
        headimg_change: 0,
      },
      tabList: [
        {
          id: 1,
          name: "认证关注者",
          selected: true,
        },
        {
          id: 2,
          name: "关注者",
          selected: false,
        },
        {
          id: 3,
          name: "你认识的关注者",
          selected: false,
        },
        {
          id: 4,
          name: "正在关注",
          selected: false,
        },
      ],
      tablist_1: true,
      tablist_2: false,
      tablist_3: false,
      tablist_4: false,
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.userData.currentPage >= this.userData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    console.log(this.UserInfo.user_id);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    //刷新
    refleshload() {
      this.doSelect(1);
      this.$refs.child.reloadUserPostData();
    },
    //根据用户id获取用户动态信息
    async getUserinfoById() {
      let res = await this.$http.post("getInfoByUserId", this.UserInfo);
      // console.log(res);
      if (res.state == 200) {
        this.editForm.user_bgimg = res.data.user_bgimg
          ? res.data.user_bgimg
          : require("@/assets/img/p_bg.png");
        this.editForm.user_headimg = res.data.user_headimg
          ? res.data.user_headimg
          : require("@/assets/img/user.png");
        (this.editForm.user_nickname = res.data.user_nickname
          ? res.data.user_nickname
          : "昵称"),
          (this.editForm.account = res.data.username
            ? res.data.username
            : "账号"),
          (this.user_fo = this.formatCount(
            res.data.user_fo ? res.data.user_fo : 0
          ));
        this.user_fans = this.formatCount(
          res.data.user_fans ? res.data.user_fans : 0
        );
        this.editForm.user_info = res.data.user_info
          ? res.data.user_info
          : "该用户比较懒，什么都没写。";
        this.user_regtime = res.data.user_regtime ? res.data.user_regtime : "";
      }
    },
    async reloadUserInfoById() {
      let res = await this.$http.post("getInfoByUserId", this.UserInfo);
      if (res.state == 200) {
        this.$store.commit("user", JSON.stringify(res.data));
      }
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
    //tablist选则
    doSelect(sid) {
      //foreach遍历
      this.tabList.forEach((item) => {
        if (item.id == sid) {
          //设置tabTitle选中
          item.selected = true;
          //内容框可见
          this.showContent(sid);
        } else {
          item.selected = false;
        }
      });
    },
    showContent(id) {
      if (id == 1) {
        this.tablist_1 = true;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 2) {
        this.tablist_1 = false;
        this.tablist_2 = true;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 3) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = true;
        this.tablist_4 = false;
      }
      if (id == 4) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = true;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
  position: relative;
}

.back_page {
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -38px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  cursor: pointer;
  display: flex;
}

.nickname {
  font-weight: 700;
}



/* tablist */
.tablist_panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 54px;
  height: 54px;
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 500;
  margin-top:38px;
  border-bottom: 1px solid rgb(239, 243, 244);
}

.tablist_panel .item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.tablist_panel .item .item_pan {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 54px;
  width: 100%;
}

.item_pan .bar {
  position: absolute;
  border-radius: 2px;
  align-self: center;
  height: 4px;
  min-width: 54px;
  bottom: 0px;
}

.item_pan .selected {
  background-color: rgb(29, 155, 240);
}

.tablist_panel .item:hover {
  cursor: pointer;
  background-color: rgba(15, 20, 25, 0.1);
}

.tablist_1,.tablist_2,.tablist_3,.tablist_4 {
  min-height: 800px;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}



@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }

  
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
  
}

@media (max-width: 1300px) {
  
}
</style>
